<template>
    <svg class="svg-icon" aria-hidden="true">
        <use :href="symbolId" :fill="color" />
    </svg>
</template>

<script>
export default {
    name: 'SvgIcon',
    props: {
        prefix: {
            type: String,
            default: 'icon',
        },
        name: {
            type: String,
            required: true,
        },
        color: {
            type: String,
        },
    },
    data() {
        return {
            symbolId: ''
        }
    },
    mounted() {
        this.symbolId = `#${this.prefix}-${this.name}`
    },
}
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor; /* 会继承颜色，需要删除svg文件内的fill="" */
    overflow: hidden;
}
</style>